<!-- 
响应式的导航栏
    屏宽 >= 768px 时，设置为 750px
        - 布局容器中8个li分为8列，1列1个li，每个li（列）宽度（750/8）px，高度30px
        - 浮动后，一行显示8个列
    屏宽 < 768px 时，设置为 100%
        - 布局容器中8个li分为3列，1列1个li，占据三分之一即每个li（列）宽度（33.33%），高度30px
        - 浮动后，一行3个li，共3行显示不同个数（3+3+2）的li
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>响应式导航栏</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            ul {
                list-style: none;
            }
            .container {
                width: 750px;
                margin: 0 auto;
            }
            ul li {
                float: left;
                width: calc(750px / 8);
                height: 30px;
                background-color: blue;
                color: #fff;
                line-height: 30px;
                text-align: center;
            }
            @media screen and (max-width: 768px) {
                .container {
                    width: 100%;
                }
                ul li {
                    width: 33.33%;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <ul>
                <li>导航栏1</li>
                <li>导航栏2</li>
                <li>导航栏3</li>
                <li>导航栏4</li>
                <li>导航栏5</li>
                <li>导航栏6</li>
                <li>导航栏7</li>
                <li>导航栏8</li>
            </ul>
        </div>
    </body>
</html>
